<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
import * as echarts from 'echarts'
// 搜索
const input = ref('')


//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(4)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    deviceList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    deviceList()
}

//获取设备数据
import { deviceStatusListService } from '@/api/SiteMana.js'
const device = ref('')
const deviceList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }
    let result = await deviceStatusListService(params);
    total.value = result.data.total
    device.value = result.data.items
    console.log(device.value);
}
deviceList();

// 删除设备
import { deviceDeleteService } from '@/api/SiteMana.js'
const deleteDevice = (row) => {
    //提示用户 确认框
    ElMessageBox.confirm(
        '你确定要删除该设备吗?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {

            let result = await deviceDeleteService(row.id)

            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            deviceList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消了删除',
            })
        })

}
 
</script>
<template>
    <h3 style="margin-left: 20px;">设备详情</h3>
    <el-card class="page-container">

        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item>
                <el-input v-model="input" style="width: 240px" placeholder="Please input" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="device" style="width: 100%" >
            <el-table-column label="ID" width="150" prop="id"></el-table-column>
            <el-table-column label="名称" width="150" prop="name2"></el-table-column>
            <el-table-column label="型号" width="200" prop="model"> </el-table-column>
            <el-table-column label="设备角色" width="150" prop="role"></el-table-column>
            <el-table-column label="设备类型" width="150" prop="type"></el-table-column>
            <el-table-column label="健康值" width="150" prop="health"></el-table-column>
            <el-table-column label="所属站点" width="150" prop="name"></el-table-column>
            <el-table-column label="查看详情" width="150">
                <template #default="{ row }">
                    <el-button type="primary" round @click="router.push('/deviceMana/' + row.id)">查看详情</el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column label="设备360" width="150">
                <template #default="{ row }">
                    <el-button type="warning" round @click="router.push('/deviceMana/'+row.id)">360</el-button>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <!-- <el-button :icon="Edit" circle plain type="primary"></el-button> -->
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteDevice(row)"></el-button>
                </template>
            </el-table-column>

        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" layout="total, prev, pager, next"
            background :total="total" @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />

    </el-card>


</template>
<style lang="scss" scoped>
h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
}

.page-container {
    min-height: 100%;
    box-sizing: border-box;

    
}
</style>